.character-clone-page {
  display: flex;
  flex-direction: column;
  .introduction-section {
    padding: 16rpx 32rpx 24rpx;
    .video {
      width: 100%;
      height: 386rpx;
      border-radius: 12rpx;
    }
    .introduction-content {
      margin-top: 32rpx;
      .title {
        font-size: 24rpx;
        line-height: 36rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
      }
      .content {
        margin-top: 16rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
      }
      .tip-cell {
        margin-top: 16rpx;
        display: flex;
        align-items: center;
        .tip-cell-icon {
          width: 28rpx;
          height: 28rpx;
        }
        .tip-cell-text {
          margin-left: 16rpx;
          font-size: 24rpx;
          line-height: 36rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
  }
  .form-section {
    flex: 1;
    padding: 0 32rpx calc(var(--safe-area-inset-bottom) + 60rpx);
    background: #2B2D2D;
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;
    .form-item {
      padding-top: 32rpx;
      .form-item-label {
        font-size: 28rpx;
        line-height: 40rpx;
        font-weight: 500;
        color: #fff;
        margin-bottom: 24rpx;
      }
      .form-item-content {
        .form-item-input {
          width: 100%;
          height: 68rpx;
          border-radius: 80rpx;
          background: #0F0F0F;
          padding: 0 32rpx;
          box-sizing: border-box;
          font-size: 28rpx;
          line-height: 40rpx;
          font-weight: 500;
          color: #fff;
        }
        .upload-video-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 240rpx;
          height: 320rpx;
          border-radius: 9rpx;
          background: #0F0F0F;
          .upload-video-icon {
            width: 64rpx;
            height: 64rpx;
          }
          .upload-video-text {
            margin-top: 10rpx;
            padding: 0 20rpx;
            font-size: 24rpx;
            line-height: 34rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.4);
            text-align: center;
          }
        }
        .upload-video-preview {
          width: 240rpx;
          height: 320rpx;
          border-radius: 9rpx;
          position: relative;
          overflow: hidden;
          &.horizontal {
            width: 320rpx;
            height: 240rpx;
          }
          .upload-video-preview-edit {
            position: absolute;
            top: 16rpx;
            right: 16rpx;
            z-index: 10;
            width: 48rpx;
            height: 48rpx;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 9rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .upload-video-edit-icon {
              width: 32rpx;
              height: 32rpx;
              display: block;
            }
          }
          .upload-video-preview-video {
            width: 100%;
            height: 100%;
          }
        }
      }
      .form-item-content-checkbox {
        display: flex;
        align-items: center;
        .form-item-content-text {
          margin-left: 20rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          .form-item-content-text-link {
            color: #5CDAFD;
          }
        }
      }
      .clone-btn {
        width: 100%;
        height: 68rpx;
        background: linear-gradient( 98deg, #75E8FF 0%, #5CDAFD 100%);
        box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(0,0,0,0.02);
        border-radius: 12rpx;
        text-align: center;
        font-size: 28rpx;
        line-height: 68rpx;
        font-weight: 500;
        color: #333;
      }
    }
  }
}
